<template>
  <div class="home-head">
    <div class="left-head">
      <div class="logo-div">
        <el-image :src="state.logoUrl"></el-image>
      </div>
    </div>
    <div class="mid-head">
      <span style="font-size: 40px; color: white">jk-software-admin</span>
    </div>
    <div class="before-right-head">
      <el-avatar :src="state.userAvatarUrl"></el-avatar>
    </div>
    <div class="right-head">
      <div style="height: 11px">
      </div>
      <div class="user-info-row">
        <span class="user-info-font">用户:{{state.username}}</span>
      </div>
      <div class="user-info-row">
        <span class="user-info-font">时间:{{state.currentTime}}</span>
      </div>
      <div style="height: 5px"></div>
      <div class="user-info-row">
        <el-dropdown>
          <span class="user-info-font">
            {{state.moreAction}}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logOutFn">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import {clearToken, clearUserInfo, getUserAvatar, getUserInfo, getUserName} from "@/utils/user-utils";
import {getYMD} from "@/utils/time-utils";
import { ArrowDown } from '@element-plus/icons-vue'
import {logOutReq} from "@/api/login/login";
import {RESPONSE_CODE_SUCCESS} from "@/config/common-config.ts";
import {elMessageTip} from "@/utils/tip-utils.ts";
import router from "@/route";
import logo from '@/assets/img/logo-no-background.png'
import defaultAvatar from '@/assets/img/default-avatar.png';
interface State {
  username: string;
  currentTime: string;
  moreAction: string;
  logoUrl: string;
  userAvatarUrl: string;
}

const state: State = {
  username: getUserName(),
  currentTime: getYMD(),
  moreAction: '更多操作',
  logoUrl: logo,
  userAvatarUrl: getUserAvatar() || defaultAvatar
}

const logOutFn = async () => {
  const res: any = await logOutReq({})

  elMessageTip(res.tipType, res.message)
  if (res.code === RESPONSE_CODE_SUCCESS){
    clearUserInfo();
    clearToken()
    router.push('/login').then()
  }
}



</script>

<style scoped lang="less">
.home-head{
  display: flex;
  height: 100%;
}

.left-head {
  width: 30vw;
  height: 100%;
}

.logo-div {
  width: 15vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mid-head {
  width: 40vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

}

.before-right-head{
  width: 15vw;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 20px;
}

.right-head{
  width: 15vw;
  height: 100%;
}

.user-info-row {
  padding-left: 0;
}

.user-info-font {
  font-size: 15px;
  color: white;
}

:deep(.el-tooltip__trigger:focus-visible) {
  outline: none;
}
</style>
